'use client'

import styles from './home.module.scss';
import {SideBar} from "@/app/components/sidebar/sidebar";
import {HashRouter as Router, Routes, Route, useLocation} from "react-router-dom";
import {Path} from '@/app/constants'
import dynamic from "next/dynamic";
import {useAppConfig} from "@/app/store/config";
import {DialogMessage} from "@/app/components/dialog/dialog-message";
import {RoleDetail} from "@/app/components/role/role-detail";
import {useAccessStore} from "@/app/store/access";

const Auth = dynamic(async () => (await import('@/app/pages/auth/auth')).Auth);
const Chat = dynamic(async () => (await import('@/app/pages/chat/chat')).Chat);
const Role = dynamic(async () => (await import('@/app/pages/role/role')).Role);
const Sale = dynamic(async () => (await import('@/app/pages/sale/sale')).Sale);

export function Screen() {
    const config = useAppConfig();
    const accessStore = useAccessStore();
    const location = useLocation();
    const isAuthPath = location.pathname === "/auth";

    return (
        <div className={`${config.tightBorder ? styles["tight-container"] : styles.container}`}>
            {isAuthPath || !accessStore.isAuthorized() ? (
                <Auth/>
            ) : (
                <>
                    {/*工具菜单*/}
                    <SideBar/>

                    {/*路由地址*/}
                    <div className={styles["window-content"]}>
                        <Routes>
                            <Route path={Path.Home} element={<Chat/>}/>
                            <Route path={Path.Chat} element={<Chat/>}>
                                <Route path=":id" element={<DialogMessage/>}/>
                            </Route>
                            <Route path={Path.Role} element={<Role/>}>
                                <Route path=":id" element={<RoleDetail/>}/>
                            </Route>
                            <Route path={Path.Sale} element={<Sale/>}/>
                        </Routes>
                    </div>
                </>
            )}
        </div>
    )
}

export function Home() {
    return (
        <Router>
            <Screen/>
        </Router>
    )
}
